<template>
  <div class="recooment-box">
    <div class="top">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in tabsList"
          :key="index"
          :label="item.label"
          :name="item.name"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="recomment">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "Recomment",
  data() {
    return {
      activeName: "/recomment/rtstyle",
      tabsList: [
        { label: "个性推荐", name: "/recomment/rtstyle" },
        { label: "歌单", name: "/recomment/songlist" },
        { label: "主播电台", name: "/recomment/zhubo" },
        { label: "排行榜", name: "/recomment/phang" },
        { label: "歌手", name: "/recomment/singer" },
        { label: "最新音乐", name: "/recomment/newmusic" }
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name);
      this.activeName= tab.name
      this.$router.push(tab.name)
  
    },
  },
};
</script>

<style scoped lang="less">
.recooment-box {
  .top {
    width: 469px;
    height: 40px;
    margin: 0 auto;
  }
  .recomment {
    height: 600PX;
    padding:0 80PX;
    background: #fff;
    overflow-y: auto;
  }
}

</style>